<template>
  <div id="header1">
    <nav class="navbar navbar-default navbar-fixed-top header">
      <div class="container">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#header-navbar-collapse"
            aria-expanded="false"
          >
            <span class="sr-only">实验楼</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="/static/img/logo_03.png" />
          </a>
        </div>
        <div class="collapse navbar-collapse" id="header-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <router-link class="dropdown-toggle" data-toggle="dropdown" to="/course">
                课程
                <span class="caret"></span>
              </router-link>
              <ul class="dropdown-menu">
                <li>
                  <a class href="courses/index.html">全部课程</a>
                </li>
                <li>
                  <a class href="courses/index.html?status=preview">即将上线</a>
                </li>
                <li>
                  <a class href="developer/index.html">开发者</a>
                </li>
              </ul>
            </li>
            <li class>
              <router-link to="/paths">路径</router-link>
            </li>
            <!-- <li class="">
                    <a href="questions/index.html">讨论区</a>
            </li>-->
            <li class="bootcamp new-nav logo-1111">
              <router-link to="/seckill">秒杀</router-link>
            </li>

            <li class="new-nav logo-1111">
              <router-link to="/Member">会员</router-link>
            </li>
          </ul>
          <div class="navbar-right btns" v-if="username">
            <router-link to="/Usercenter">
              <button class="navbar-btn btn btn-info sign-up">{{username}}</button>
            </router-link>
            <button class="navbar-btn btn btn-info sign-in" @click="Logout">退出</button>
          </div>
          <div class="navbar-right btns" v-else>
            <a
              class="btn btn-default navbar-btn sign-in"
              data-sign="signin"
              href="#sign-modal"
              data-toggle="modal"
            >登录</a>
            <a
              class="btn btn-default navbar-btn sign-up"
              data-sign="signup"
              href="#sign-modal"
              data-toggle="modal"
            >注册</a>
          </div>
          <form class="navbar-form navbar-right" method="get" role="search">
            <div class="form-group">
            <input
                type="text"
                class="form-control"
                v-model="key"
                @keyup.enter="redisearchs"
                autocomplete="off"
                placeholder="搜索 课程/问答"
              />
            </div>
          </form>
        </div>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: "header1",
  data() {
    return {
      username: "",
      key: "",
    };
  },
  methods: {
    redisearchs:function(){
        this.$router.push({path: 'course', query: {key: this.key}});
            },
    getUsernames() {
      this.username = localStorage.getItem("username");
    },
    Logout() {
      localStorage.removeItem("username");
      localStorage.removeItem("token");
      localStorage.removeItem("user_id");
      alert("退出成功");
      console.log(this.$route.path)
      if(this.$route.path=='/'){
        window.location.reload();
      }else{
      this.$router.push({ path: "/" });

      } 
    }
  },
  mounted() {
    this.getUsernames();
  }
};
</script>

<style scoped>
</style>
